<template>
  <div class="social-container">
    <nav class="top-nav">
      <div class="nav-tabs">
        <span class="active">关注</span>
        <span>发现</span>
        <span>附近</span>
      </div>
    </nav>

    <main class="content">
      <div class="post-cards">
        <div class="post-card" v-for="post in posts" :key="post.id">
          <div class="user-info">
            <img class="avatar" :src="post.avatar" alt="用户头像">
            <div class="user-meta">
              <h3>张三</h3>
              <span class="location">{{ post.location }}</span>
            </div>
          </div>

          <div class="post-content">
            <p>{{ post.title }}</p>
            <div class="post-meta">
              <span class="like">❤️ {{ post.likes }}</span>
              <span class="comment">💬 {{ post.comments }}</span>
              <span class="time">{{ post.time }}</span>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { queryAll } from '../../api/psots.js'
const getqueryAll = async () => {
  queryAll({
    "pageSize": 20,
    "pageNo": 0,
    "params": {
      "user_id": "9ef0259d-6636-4b3e-b53c-163e4356595f"
    }
  }).then(res => {
    console.log(res);
    posts.value = res.result.records
    console.log(posts.value);
  })
}
const posts = ref([
  {
    id: '',
    userid: '',
    title: '',
    content: '',
  },

]);
onMounted(() => {
  getqueryAll();
});
</script>

<style scoped>
.social-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.top-nav {
  display: flex;
  justify-content: center;
  padding: 12px;
  background: #f8dcd9;
  border-bottom: 1px solid #eee;
}

.nav-tabs {
  display: flex;
  gap: 20px;
  justify-content: center;

}

.nav-tabs span {
  white-space: nowrap;
  padding: 8px;
  color: #666;
}

.nav-tabs .active {
  color: #ff2442;
  font-weight: bold;
}

.user-avatar img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  background: #f5f5f5;
}

.post-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.post-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
}

.user-meta h3 {
  margin: 0;
  font-size: 16px;
}

.location {
  color: #666;
  font-size: 12px;
}

.post-content p {
  margin: 0 0 12px 0;
  line-height: 1.5;
}

.post-meta {
  display: flex;
  gap: 20px;
  color: #666;
  font-size: 14px;
}

.bottom-nav {
  display: flex;
  justify-content: space-around;
  padding: 12px;
  background: #fff;
  border-top: 1px solid #eee;
}

.nav-item {
  color: #666;
  padding: 8px;
}

.nav-item.active {
  color: #ff2442;
}
</style>